<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
        <link rel="stylesheet" href="../js/webuploader/webuploader.css" />
        <script type="text/javascript" src="../js/webuploader/webuploader.js" ></script>
        <title>添加商品</title>
        <style>
            .quyu{ padding: 0.5em 4%; background: #fff;}
            input{ background: none; border: 1px solid;}
            input[type=text]{ border-color: #ccc; font-size: 1em}
            input[type="button"]{ background: none;}
            p,span{ font-size: 0.8em; color: #999;}
            .top input{ }
            .top{ height: 7.5em;  overflow: hidden; position: relative; background: #fff; border-bottom: 1px solid #dedede;}
            .top span{ display: block; height: 3em; line-height: 3em; }
            .top a{  text-align: center;  color: #ff3366; padding: 0 1.5em; margin-left: 1.25em; border: 1px solid #ff3366; }
            .top #yulan{ width:6.5em; height: 4.8em;   position: absolute; top: 0.625em; right: 0.625em;  overflow: hidden;}
            .top #yulan img{  height: 100%; width:100%; object-fit: cover;}
            
            
            .main{ background: #fff;}
            .main p{ border-bottom: 1px solid #ccc; text-indent: 0; padding-top: 1em;  width: 50%; float: left;}
            .main input{ display: inline; width: 60%; margin-bottom: 0; padding: 0;}
            .main i{  font-style: normal;  float: left; text-align: right; line-height: 1.875em;}
            .main input[type="text"]{ height: 2em; margin-right: 0.25em;}
            .main textarea{ width: 75%; margin-bottom: 0; font-size: 1em; padding: 0.5em; height:5em; line-height: 1.5em;}
            .main input[type=button]{ height:3em; font-size:0.8em; color:#fff; background: #ff3366; border: none; width: 40%; position: relative; left: 50%; margin-bottom: 1em; }
            #upload0{ display: none;}
            p.w100{ width: 100%;}
            p.w100 input{      width: 60%;
                height: 2em;
                font-size: 1em;
                line-height: 2em;}
            input.submit{ padding: 0.3125em;}
            .webuploader-pick{
                background-color: #FFF; 
                display: inline-block;
                text-align: center;
                color: #ff3366;
                padding: 8px 25px;
                margin-left: 20px;
                border: 1px solid #ff3366;
                line-height: 1em;
            }
        </style>
    </head>

    <body>
        <header>
            <a><span class="leftleft"></span></a>
            <h1>添加商品</h1>
        </header>
        <section class="quyu">
            <form id="goodForm">
                <input type="hidden" name="itemPic" class="itemPic" value="" />
                <div class="top">
                    <span>商品图片</span>
                    <div id="filePicker">上传</div>
                    <p>上传图片大小请在1M以下</p>
                    <div id="yulan"><img id="itemPic" src="../img/img_4.png" /></div>
                </div>
                <div class="main">
                    <p class="w100"><i>名称：</i><input type="text" value="" id="itemName" name="itemName"/></p>
                    <p><i>原价：</i><input type="text" value="" id="listPrice" name="listPrice"/></p>
                    <p><i>单位：</i><input type="text" value="" id="listUnit" name="listUnit"/></p>
                    <p><i>特价：</i><input type="text" value="" id="spePrice" name="spePrice"/></p>
                    <p><i>单位：</i><input type="text" value="" id="speUnit" name="speUnit"/></p>
                    <p class="w100"><i>开始时间：</i><input type="date" value="" id="startTime" name="startTime"/></p>
                    <p class="w100"><i>结束时间：</i><input type="date" value="" id="endTime" name="endTime"/></p>
                    <p class="w100" style="border: none; clear: both;"><i>说明：</i><textarea type="text" value="" name="remark" id="remark"/></textarea></p>
                    <input class="submit" type="button" value="完成" onclick="saveItem();"/>
                </div>
            </form>
        </section>
        

        <footer>
            <nav class="mui-bar mui-bar-tab">
                <a href="javascript:;" id="tcIndex">
                    <img src="../img/shouye2.png" />
                    <span class="mui-tab-label">首页</span>
                </a>
                <a class="action" href="javascript:;" id="myfabu">
                    <img src="../img/fabu2b.png" />
                    <span class="mui-tab-label">发布</span>
                </a>
                <a href="javascript:;" id="myInfo">
                    <img src="../img/mine.png" />
                    <span class="mui-tab-label">我的</span>
                </a>
            </nav>
        </footer>
<script>

var itemId = getVal("itemId");
var actId = getVal("actId");
var cateId = getVal("cateId");
var type = getVal("type");

$(document).ready(function(){  
    
    $("#listUnit").blur(function(){
        $("#speUnit").val($(this).val());
    });
    
    $("#speUnit").blur(function(){
        $("#listUnit").val($(this).val());
    });
    if(!!itemId){
        // 绑定数据
        appcan.ajax({
           type:"get",
           url:host+"/getItem.json?itemId="+itemId,
           dataType:"json",
           success : function(dataResult) {
               var data = dataResult.data;
               $("input[name='itemName']").val(data.itemName);
               $("input[name='listPrice']").val(data.listPrice);
               $("input[name='listUnit']").val(data.listUnit);
               $("input[name='spePrice']").val(data.spePrice);
               $("input[name='speUnit']").val(data.speUnit);
               $("input[name='startTime']").val(data.startTime);
               $("input[name='endTime']").val(data.endTime);
               $("#remark").val(data.remark);
               $("#itemPic").attr("src", hostIp+data.itemPic);
               $(".itemPic").val(data.itemPic);
           }
       });
    }
    
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '../js/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: host+"/image/uploadImg.json?userId="+appcan.locStorage.getVal("userId"),
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        duplicate : true,
        compress :{
            width: 750,
            height: 300,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 90,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: false,
            // 是否允许裁剪。
            crop: false,
            // 是否保留头部meta信息。
            preserveHeaders: true,
            // 如果发现压缩后文件大小比原来还大，则使用原来图片
            // 此属性可能会影响图片自动纠正功能
            noCompressIfLarger: false,
            // 单位字节，如果图片大小小于此值，不会采用压缩。
            compressSize: 0
        },
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function(file, dataResult) {
        $("#itemPic").attr("src", hostIp+dataResult.data.imgUrl);
        $(".itemPic").val(dataResult.data.imgUrl);
    });
    uploader.on('uploadError', function(file, reason){
        if(reason=="F_EXCEED_SIZE"){
            alert("文件大小不能超过2M");
        }
    })
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var percent = (percentage * 100).toFixed(2);
        if(percent!=100){
            $(".webuploader-pick").html("正在上传，进度"+percent+"%");
            $("#filePicker input[name='file']").attr("disabled","disabled");
        }else{
            $(".webuploader-pick").html("上传");
            $("#filePicker input[name='file']").removeAttr("disabled");
        }
    });
});

function saveItem(){
    if($.trim($(".itemPic").val()).length == 0){
        appcan.window.alert({
            title:'提示',
            content:'请上传商品图片',
            buttons:'确定'
        });
        return false;
    }
    if($.trim($("#itemName").val()).length == 0){
        appcan.window.alert({
            title:'提示',
            content:'请输入商品名称',
            buttons:'确定'
        });
        return false;
    }
    if($.trim($("#listPrice").val()).length == 0){
        appcan.window.alert({
            title:'提示',
            content:'商品原价不能为空',
            buttons:'确定'
        });
        return false;
    }
   
    if($.trim($("#listUnit").val()).length == 0){
            appcan.window.alert({
                title:'提示',
                content:'原价商品单位不能为空',
                buttons:'确定'
            });
            return false;
        }
    
    if($.trim($("#spePrice").val()).length == 0){
        appcan.window.alert({
            title:'提示',
            content:'商品特价不能为空',
            buttons:'确定'
        });
        return false;
    }
    
    if($.trim($("#speUnit").val()).length == 0){
            appcan.window.alert({
                title:'提示',
                content:'特价商品单位不能为空',
                buttons:'确定'
            });
            return false;
        }
    
    if($.trim($("#startTime").val()).length == 0){
        appcan.window.alert({
            title:'提示',
            content:'活动商品开始时间不能为空',
            buttons:'确定'
        });
        return false;
    }
    if($.trim($("#endTime").val()).length == 0){
        appcan.window.alert({
            title:'提示',
            content:'活动商品结束时间不能为空',
            buttons:'确定'
        });
        return false;
    }
    var baseParam = {
        id : itemId,
        cateId:cateId,
        actId:actId
    };
    var param = $("#goodForm").serializeJson(baseParam);
    console.log(param);
    appcan.ajax({
       type:"post",
       url:host+"/saveItem.json",
       data:param,
       dataType:"json",
       contentType: "application/json",
       success : function(dataResult) {
           openUrl("good_edit.html?type="+type+"&actId="+actId,"good_edit");
       }
   })
}
</script>
    </body>

</html>